<template>
  <div class="glow-container" :style="bgimg">
    <h1 class="glowIn">Hello World</h1>
    <p class="glowIn">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
      labore et dolore magna aliqua. Mattis pellentesque id nibh tortor. Suspendisse ultrices gravida dictum fusce ut
      placerat orci nulla. A lacus vestibulum sed arcu.</p>
  </div>
</template>
<script>
import img from '@/assets/images/RtVq2wxQYySDb8L.jpg'
export default {
  data() {
    return {
      bgimg: {
        backgroundImage: 'url(' + img + ')'
      }
    }
  },
  mounted() {
    this.divideText()
  },
  methods: {
    divideText() {
      var textItems = document.querySelectorAll('.glowIn')
      textItems.forEach((textItem) => {
        var letters = textItem.textContent.split('')
        textItem.textContent = ''
        letters.forEach((letter, i) => {
          var span = document.createElement('span')
          span.textContent = letter
          span.style.animationDelay = `${i * 0.05}s`
          textItem.append(span)
        })
      })
    }
  }
}
</script>

<style lang="scss">
  .glow-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    background: linear-gradient(rgba(16, 16, 16, 0.8),rgba(16, 16, 16, 0.8));
    background-size: 100% 100%;
    height: 400px;
    width: 100%;
    color: #fff;
    filter: grayscale(90%);

    h1 {
      text-align: center;
    }

    h1,
    p {
      line-height: 1.8;
    }

    .glowIn {
      width: 80%;

      span {
        animation: showin 1.5s both;
      }
    }
  }

  @keyframes showin {
    0% {
      opacity: 0;
    }

    65% {
      opacity: 1;
      text-shadow: 0 0 5px #fff;
    }

    75% {
      opacity: 1;
    }

    100% {
      opacity: 0.7;
    }
  }
</style>
